<template lang="html">
  <div class="allDetials">
    <!-- 导航部分 -->
    <div  class="allDetials_nav"  >
      <!-- 点击返回上一个页面 -->
      <div @click="goback()" class="allDetials_nav_img">
        <img v-bind:src="leftSrc" alt="" style="width:0.5rem;height:1rem;float:left;margin-top:1rem;margin-left:0.5rem;z-index:500;">
      </div>
        <!--下拉菜单部分  -->
        <p @mousedown="shows()" v-if="type == 'essay'">阅读 <img v-bind:src="downSrc"/> </p>
        <p @mousedown="shows()" v-if="type == 'music'">音乐 <img v-bind:src="downSrc"/></p>
        <p @mousedown="shows()" v-if="type == 'question'">问答 <img v-bind:src="downSrc"/></p>
        <p @mousedown="shows()" v-if="type == 'hp'">图文 <img v-bind:src="downSrc"/></p>
        <p @mousedown="shows()" v-if="type == 'serialcontent'">连载 <img v-bind:src="downSrc"/></p>
        <div v-if="show == true" class="allDetials_nav_content">
          <ul>
            <li @click="change('essay')">阅读</li>
            <li @click="change('question')">问答</li>
            <li @click="change('music')">音乐</li>
            <li @click="change('hp')">图文</li>
            <li @click="change('serialcontent')">连载</li>
          </ul>
            <div  @click="hides()"class="allDetials_shaow">

            </div>

        </div>

    </div>

    <!-- 刷新开始 -->
    <!-- 日期导航 -->
    <div class="allDetials_dataNav" >
      <!-- <p>{{ oYear }}年{{ oMonth }}月</p> -->
      <!-- time -->
      <can :oYear="oYear" :oMonth="oMonth"  :func="shouzhi"></can>
    </div>
    <!-- 刷新结束 -->
    <!-- 要在这里包裹 -->

    <!-- 阅读模块 -->
      <div  ref="elememt"  class="hp clear_fixed" v-if="type == 'essay'" @click='tran1(item.content_id)' v-for="item in datas">
            <img class="hp_img" v-bind:src="item.author[0].web_url" />
          <p style="text-align:left" class="hp_content">{{ item.hp_title }}</p>
          <p class="hp_title">文 / {{item.author[0].user_name}}</p>
        </div>
      <!--  -->
    <!-- 图文 -->
    <div class=" hp clear_fixed" v-if="type == 'hp'" @click='tran2(item.hpcontent_id)' v-for="item in datas">
      <img class="hp_img" :src="item.hp_img_original_url" alt="">
      <p class="hp_content">{{ item.hp_content }}</p>
      <p class="hp_title">{{ item.hp_title }}</p>
    </div>
    <!-- 问答 -->
    <div class="hp clear_fixed" v-if="type == 'question'" @click='tran4(item.question_id)' v-for="item in datas">
      <img class="hp_img" :src="item.author_list[0].web_url" alt="">
      <p class="hp_content">{{ item.question_title }}</p>
      <p class="hp_title">{{ item.answer_content }}</p>
    </div>


    <!-- 音乐模块 -->
      <div ref="elememt" class="hp clear_fixed" v-if="type == 'music'" @click='tran3(item.id)' v-for="item in datas">
          <img class="hp_img" v-bind:src="item.cover"  />
        <p style="text-align:left" class="hp_content">{{ item.story_title }}</p>
        <label style="float:left;margin-right:0.7rem;color: lightgray">{{ item.title }}</label>
        <label style="float:left;color: lightgray">| {{item.author.user_name}}</label>
      </div>
      <!-- 连载 -->
      <div v-for="item in datas" v-if="type == 'serialcontent'" class="hp clear_fixed"  @click='tran5(item.id)'>
            <img class="hp_img" :src="item.author.web_url" alt="">
            <p class="hp_content">{{ item.title }}</p>
            <p class="hp_title">文/{{ item.author.user_name }}</p>
      </div>



  </div>
</template>

<script>
// 获取时间
// var oDate = new Date(),
//     oYear,
//     oMonth,
//     oDay;
// oYear = oDate.getFullYear();
// oMonth = oDate.getMonth() + 1;
// oDay = oDate.getDate();

import can from '../all/canlendar'
import axios from 'axios';
export default {
data(){
  return{
    datas:[],
    type:'',
    height:'',
    type:'',
    show:false,
    leftSrc:'../../static/img/left.png',
    downSrc:'../../static/img/down.png',
    isClick:false,
    oYear:'',
    oMonth:'',
    oDaye:'',
    data:''
  }
},
watch:{
  datas(n,o){
    // console.log('监听datas'+this.data);
    if(this.data!='')
    {
      this.oYear = this.data.split('-')[0];
      this.oMonth = this.data.split('-')[1];
    }
  }
},
created(){
  const oDate = new Date();
  this.oYear=oDate.getFullYear(),
  this.oMonth=oDate.getMonth() + 1,
  this.oDay=oDate.getDate()
  //console.log(this.$route.params.msg);
  axios.get('http://v3.wufazhuce.com:8000/api/'+this.$route.params.msg+'/bymonth/'+this.oYear+'-'+this.oMonth+'-'+this.oDay+'%2000:00:00?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response)=>{
    //console.log(this.$route.params.msg);
    this.datas = response.data.data;
    this.type = this.$route.params.msg;
  })
},
methods:{
  // 下拉刷新
  onRefresh(done) {
        console.log('sssssssss');
        location.reload();
            //  done()


           },

  // refresh(loaded){
  //   // setTimeout(()=>{
  //   //  loaded('done');
  //   //  },2000)
  //
  //    loaded('done');
  //    location.reload(true);
  //  },
  //接收子组件
  shouzhi(data){
    // console.log('aaaaaaaaaaaa'+data);
    this.data = data;
    axios.get('http://v3.wufazhuce.com:8000/api/'+this.$route.params.msg+'/bymonth/'+data+'%2000:00:00?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response)=>{
      //console.log(this.$route.params.msg);
      this.datas = response.data.data;
      this.type = this.$route.params.msg;
    })
  },
  tran1(id){
    this.$router.push({
      path:'/allDetials/essay/'+id
    })
    console.log(id);
  },
  tran2(id){
    console.log(id);
    this.$router.push({
      path:'/allDetials/hp/'+id
    })
  },
  tran3(id){
    this.$router.push({
      path:'/allDetials/music/'+id
    })
  },
  tran4(id){
    // console.log(this);
    console.log(this.datas);
    // console.log(id);
    this.$router.push({
      path:'/allDetials/question/'+id
    })
  },
  tran5(id){
    this.$router.push({
      path:'/allDetials/Serial/'+id
    })
  },
    // 第一次点击出现，第二次点击消失
    shows(){
      if(this.isClick){
        this.show = false
        this.isClick = false
      }else{
        this.show = true
        this.isClick = true
      }
    },
    // 页面跳转，请求数据
    change(item){
      console.log(this.show);

      this.show = false
      console.log(this.show);

      this.$router.push({
        path:'/allDetials/'+item
      })
      axios.get ('http://v3.wufazhuce.com:8000/api/'+this.$route.params.msg+'/bymonth/2017-11-01%2000:00:00?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response)=>{
        //console.log(this.$route.params.msg);
        this.datas = response.data.data;
        this.type = this.$route.params.msg;

      })
    },
    // 点击菜单隐藏
    hides(){
      this.show = false
    },
    // 返回上一页
    goback(){
      this.$router.push({
        path:'/all/'
      })
    }
  },
  components:{
    can
  }
}
</script>

<style lang="css" scoped>
*{
  margin:0;
  padding: 0;
  font-size: 1.4rem;
}
.allDetials_nav{
  width: 100%;
  height: 4rem;
  text-align: center;
  line-height: 3rem;
  background: white;
  font-size: 1.6rem;
  border-bottom:  0.08rem solid lightgray;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

}
.allDetials_nav img{
  width: 1rem;
  height: 0.5rem;}
.allDetials_dataNav{
  height: 3rem;
  line-height: 2rem;
  width: 100%;
  background: #f9f8f8;
}
.allDetials_nav_img{
  width: 10%;
  /*height: 100%;*/
  float: left;
  margin-top: 0.6rem;
}
.allDetials_nav p {
  width: 84%;
  height: 100%;
  line-height: 4rem;
  text-align: center;
  display: inline-block;
  padding-right: 6%;
  font-size: 1.5rem;
  z-index: 10;
}
.allDetials_nav_content{
  width: 100%;
  height: 20rem;
  background: white;
  position: absolute;
  color: rgb(204,198,198,180);
  font-weight: normal;
}
.allDetials_nav_content ul{
  height: 100%;
}
.allDetials_nav_content li{
  height: 17%;
  font-size: 1.5rem;
  padding-top: 2%;
  border-top:0.01rem solid rgb(232,227,227);
}
.allDetials_shaow{
  height:200%;
  width: 100%;
  background:rgba(0,0,0,0.28);
}

.allDetials{
  overflow: hidden;
  height: 100%;
}
.essay label:nth-of-type(2){
  padding: 0 0.5rem;
}
.specil:nth-of-type(1){
  margin-top:10rem;
}
/*图文/问答*/
.clear_fixed:after{
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
}
.hp{
  width:100%;
  border-bottom: 0.08rem solid lightgray;

}
.hp>.hp_img{
  width:2.7rem;
  height: 2.7rem;
  float: left;
  margin: 0.7rem 0.9rem;
}
.hp>.hp_content{
  text-align: left;
  width:76%;
  color: gray;
  line-height: 2.7rem;

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hp>.hp_title{
  color: lightgray;
  text-align: left;
  line-height: 1rem;

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.vue-pull-to-wrapper{

}
.vue-pull-to-wrapper .action-block[data-v-12abd9fb] {
    position: relative;
    width: 100%;
    /*top: 8rem;*/
    left: 0;
}
.default-text[data-v-12abd9fb] {
    height: 100%;
    line-height: 50px;
    text-align: center;
    /*margin-top: 4rem;*/
}

</style>
